<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>赛事管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />

    <link rel="stylesheet" href="css/demo.css" />
    <script src="js/ydui.flexible.js"></script>
    <style>
        .btn-block{margin: 0}
        .cell-right{justify-content: flex-start;text-align: left;}
    </style>
</head>
<body>
<section class="g-flexview" id="app" v-cloak>
    <sync-loader v-if="loading" :color="color"></sync-loader>
    <div  class="m-tab">
        <ul class="tab-nav">
            <li class="tab-nav-item tab-active"><a href="javascript:;" @click="tabSendH">赛事详情</a></li>
            <li class="tab-nav-item"><a href="javascript:;"  @click="tabsend">消息</a></li>
        </ul>
    <div class="tab-panel">
        <div class="tab-panel-item tab-active" style="height: auto">
            <section class="g-scrollview" v-if="!loading">
                <div class="m-cell demo-small-pitch">
                    <div class="cell-item">
                        <div class="cell-left">赛事名称</div>
                        <div class="cell-right">
                            {{details.matchName}}
                        </div>
                    </div>
                    <div class="cell-item">
                        <div class="cell-left">比赛模式</div>
                        <label class="cell-right">
                            {{details.matchMode}}
                        </label>
                    </div>
                    <div class="cell-item">
                        <div class="cell-left">报名开始时间</div>
                        <div class="cell-right">
                            {{details.applyStartTime}}
                        </div>
                    </div>
                    <div class="cell-item">
                        <div class="cell-left">报名结束时间</div>
                        <div class="cell-right">
                            {{details.applyEndTime}}
                        </div>
                    </div>
                    <div class="cell-item">
                        <div class="cell-left">比赛开始时间</div>
                        <div class="cell-right">
                            {{details.matchStartTime}}
                        </div>
                    </div>
                    <div class="cell-item">
                        <div class="cell-left">比赛结束时间</div>
                        <div class="cell-right">
                            {{details.matchEndTime}}
                        </div>
                    </div>
                    <div class="cell-item">
                        <div class="cell-left">赛事条件</div>
                        <div class="cell-right">
                            {{details.applyFee}}
                        </div>
                    </div>

                    <div class="cell-item">
                        <div class="cell-left">奖励设置</div>
                        <div class="cell-right">
                            <p v-for="item in matchRewardList">第{{item.ranking}}名：{{item.awardValue*100}}%</p>
                        </div>
                    </div>

                    <div class="cell-item">
                        <div class="cell-left">比赛战队</div>
                        <div class="cell-right">{{details.matchTeamName}}</div>
                    </div>
                    <div class="cell-item">
                        <div class="cell-left">比赛类型</div>
                        <label class="cell-right">
                            {{details.matchType}}
                        </label>
                    </div>
                    <div class="cell-item">
                        <div class="cell-left">房间密码</div>
                        <div class="cell-right">
                            {{details.roomPwd}}
                        </div>
                    </div>
                    <div class="cell-item">
                        <div class="cell-left">赛事状态</div>
                        <div class="cell-right">
                            <span v-if="details.matchState ==10">未开始</span>
                            <span v-else-if="details.matchState ==30">报名中</span>
                            <span v-else-if="details.matchState ==40">准备中</span>
                            <span v-else-if="details.matchState ==50">比赛中</span>
                            <span v-else-if="details.matchState ==60">战绩确认中</span>
                            <span v-else-if="details.matchState ==70">已结束</span>
                            <span v-else-if="details.matchState ==80">已取消 </span>
                        </div>
                    </div>
                    <div class="cell-item">
                        <div class="cell-left" style="width: 0"></div>
                        <div class="cell-right">
                            “进行中”和“已结束”“已取消”的无法解散比赛
                        </div>
                    </div>
                </div>
                <div class="m-button" v-if="this.details.matchState !='80' && this.details.matchState !='70'">
                    <div class="m-grid-2">
                        <div class="grids-item">
                            <button type="button" id="saveBtn" @click="saveBtn" class="btn-block btn-primary">{{status}}</button>
                        </div>
                        <div class="grids-item" v-if="this.details.matchState =='10' || this.details.matchState =='30'">
                            <button type="button"  @click="cancelBtn" class="btn-block btn-hollow">取消比赛</button>
                        </div>
                    </div>
                </div>
            </section>
    </div>
        <div class="tab-panel-item" style="height: 100%;padding: 0">
            <div class="message">
                    <div class="send"  v-for="item in datalist">
                        <span class="time">{{item.time}}</span>
                        <div class="msg">
                            <p class='minister'>
                                {{item.nickname}}:
                            </p>
                            <p>{{item.content}}</p>
                        </div>
                    </div>
                <div class="loadmessage" v-show="showmessage">请稍等，加载中……</div>
            </div>
        </div>
    </div>
    </div>
    <div class="bottom_send" v-if="showS" >
        <input type="text" class="cell-input" v-model="sendContent" placeholder="请输入内容" autocomplete="off" />
        <button type="button" class="btn-primary send_btn" @click="sendMesssage">发送</button>
    </div>
</section>
<script src="js/jquery.min.js"></script>
<script src="js/ydui.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/vue-resource.js"></script>
<script src="js/vue-spinner-master/dist/vue-spinner.js"></script>
<script src="js/layer/layer.js"></script>
</body>
<script>
    /* 获取头部信息 */
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return r[2];
        }
    };
    var SyncLoader = VueSpinner.SyncLoader;
    var app = new Vue({
        el: '#app',
        components: {
            'SyncLoader': SyncLoader
        },
        data: {
            token: GetQueryString('token'),
            matchId:GetQueryString('matchId'),
            appType:GetQueryString('appType'),
            clubId:'',
            loading: true,
            color: '#FF6C00',
            details: [],
            matchRewardList:[],
            sendContent:'',
            datalist:[],
            showS:false,
            showmessage:true
        },
        methods: {
            tabSendH:function () {
                $('.m-tab').tab({
                    nav: '.tab-nav-item',
                    panel: '.tab-panel-item',
                    activeClass: 'tab-active'
                });
                $('.m-tab').find('.tab-nav-item').on('opened.ydui.tab', function (e) {
                });
                this.showS=false;
            },
            tabsend:function () {
                $('.m-tab').tab({
                    nav: '.tab-nav-item',
                    panel: '.tab-panel-item',
                    activeClass: 'tab-active'
                });
                $('.m-tab').find('.tab-nav-item').on('opened.ydui.tab', function (e) {
                });
                this.showS=true;
                this.messageDetails();
            },
            messageDetails:function () {
                this.$http({
                    method: "post",
                    url: "/appMatchMsg/getMatchMsg",
                    data: {
                        token: this.token,
                        matchId:this.matchId,
                    },
                    emulateJSON: true
                }).then(function(res) { // 访问成功后执行
                    console.log(res);
                    this.showmessage=false;
                    // layer.msg(res.data.message);
                    this.datalist=res.data.data;
                }, function(error) { // 访问失败执行
                    console.log(error);
                    layer.msg('获取详情失败');
                    this.loading = false;
                })
            },
            sendMesssage:function(){
                if(this.sendContent =='' || this.sendContent ==null){
                    layer.msg('请输入消息内容');
                    return;
                }
                this.$http({
                    method: "post",
                    url: "/appMatchMsg/sendMatchMsg",
                    data: {
                        token: this.token,
                        matchId:this.matchId,
                        sendContent:this.sendContent
                    },
                    emulateJSON: true
                }).then(function(res) { // 访问成功后执行
                    console.log(res);
                   layer.msg(res.data.message);
                   this.messageDetails();
                   this.sendContent='';
                }, function(error) { // 访问失败执行
                    console.log(error);
                    layer.msg('获取详情失败');
                    this.loading = false;
                })
            },
            getdetails: function() {
                this.$http({
                    method: "post",
                    url: "/appMatch/matchDetail",
                    data: {
                        token: this.token,
                        id:this.matchId
                    },
                    emulateJSON: true
                }).then(function(res) { // 访问成功后执行
                    this.loading = false;
                    // layer.msg(res.data.message);
                    if(res.data.code != '0'){
                        return;
                    }
                    console.log(res);
                    this.details=res.data.data;
                    this.matchRewardList=res.data.data.matchRewardList;
                    this.clubId = this.details.clubId;
                    /*按钮状态*/
                    var state = this.details.matchState;
                    if(state ==10){
                        this.status="开始报名";
                    }else if(state ==30){
                        status="准备中";
                    }else if(state ==40){
                        status="比赛中";
                    }else if(state ==50){
                        status="战绩确认";
                    }else if(state ==60){
                        status ="战绩确认中"
                    }else if(state ==70){
                        status ="战绩确认中"
                    }
                }, function(error) { // 访问失败执行
                    console.log(error);
                    layer.msg('获取详情失败');
                    this.loading = false;
                })
            },
            saveBtn: function() {
                    var token =this.token;
                    var matchName =  this.details.matchName;
                        var matchId=this.matchId;
                        var matchState =this.details.matchState;
                        console.log(matchState);
                        var title ='';
                        if(matchState ==10 ){
                            title ="确定报名";
                            matchState='30'
                        }else if(matchState ==30){
                            title ="确定比赛";
                            matchState='40'
                        }else if(matchState ==40){
                    title ="比赛中";
                    matchState='50'
                }else if(matchState ==50){
                    title="战绩确认";
                    matchState='60'
                }else if(matchState ==60){
                    title ="战绩确认中";
                    matchState='70';
                    if(this.appType == 'ios'){
                        //跳转战绩确认页面
                        var res = {'name':matchName,'matchId':matchId};
                        window.webkit.messageHandlers.goMatchConfirm.postMessage(res);
                    }else{
                        window.android.sureCompetition(matchName,matchId);
                    }
                    return;
                }
                layer.confirm(title, {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    /*调取接口传更改状态值*/
                    $.ajax({
                        url: "/appClub/updateMatchState",
                        type: "post",
                        data: {
                            token: token,
                            matchId: matchId,
                            matchState:matchState
                        },
                        dataType: "json",
                        success: function(res) {
                            console.log(res);
                            layer.msg(res.message);
                            if(res.code =='0') {
                                layer.msg('确认成功', {icon: 1});
                                if(this.appType == 'ios'){
                                    sleep(2);
                                    window.webkit.messageHandlers.reloadPage.postMessage('');
                                }else{
                                    window.android.reloadPage('');
                                }
                            }
                        },
                        error: function() {
                            layer.msg('接口调取失败');
                        }
                    });
                });
            },
            cancelBtn:function () {
                var token =this.token;
                var matchId=this.matchId;
                var matchState =this.details.matchState;
                layer.confirm('确定取消赛事', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    /*调取接口传更改状态值*/
                    $.ajax({
                        url: "/appClub/updateMatchState",
                        type: "post",
                        data: {
                            token: token,
                            matchId: matchId,
                            matchState:80
                        },
                        dataType: "json",
                        success: function(res) {
                            console.log(res);
                            layer.msg(res.message);
                            if(res.code =='0') {
                                layer.msg('取消成功', {icon: 1});
                                if(this.appType == 'ios'){
                                    sleep(2);
                                    window.webkit.messageHandlers.reloadPage.postMessage('');
                                }else{
                                    window.android.reloadPage('');
                                }
                            }else{
                                layer.msg(res.message);
                                location.reload()
                            }
                        },
                        error: function() {
                            layer.msg('接口调取失败');
                        }
                    });
                });
            }
        },
        mounted: function() {
            this.$nextTick(function() {
                var that = this;
                that.getdetails();
                setInterval(function(){
                    that.messageDetails();
                },5000);
            })
        }
    })
</script>

</html>